<template>
  <div style="height: 100%; width: 100%; background: #fff">
    <a-row
      :gutter="5"
      type="flex"
      justify="space-around"
      align="top"
      style="width: 100%; margin-top: 10px; margin-bottom: 10px"
    >
      <a-col :span="8">
        <a-card style="background: #00a0e9; color: #fff; height: 178px">
          <p>
            当前状态：<a-tag color="#87d068">{{ runStatus }}</a-tag>
          </p>
          <p style="padding-left: 70px">
            <a-switch checked-children="启动" un-checked-children="停止" default-checked @change="switchChange" />
          </p>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card title="数据服务" style="background: rgb(233 172 0); color: #fff; height: 178px">
          <p>
            在线：<a-tag color="#87d068">{{ onlineCount }}</a-tag>
          </p>
          <p>
            离线：<a-tag color="#f50">{{ unOnlineCount }}</a-tag>
          </p>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card title="数据库" style="background: rgb(115 215 201); color: #fff; height: 178px">
          <p>
            总共：<a-tag color="#87d068">{{ allDbCount }}</a-tag>
          </p>
          <p>
            健康：<a-tag color="#2db7f5">{{ healthDBCount }}</a-tag>
          </p>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card title="正在执行任务" style=" background: rgb(185 166 15; color: #fff;height: 178px;">
          <p style="text-align: center">
            <a-tag color="#87d068">{{ runTaskCount }}个</a-tag>
          </p>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card title="备份数" style="background: rgb(160 184 195); color: #fff; height: 178px">
          <p style="text-align: center">
            <a-tag color="#87d068">{{ backupCount }}个</a-tag>
          </p>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <a-card size="small" title="系统日志" style="width: 100%">
          <a slot="extra" @click="clickMoreLog">更多</a>
          <a-table
            ref="table"
            size="small"
            :rowKey="(record) => record.code"
            :pagination="false"
            :defaultExpandAllRows="true"
            :columns="logColumns"
            :dataSource="logData"
            :loading="loading"
            showPagination="auto"
          >
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
import { DbServerCount } from '@/api/modular/main/DbServerManage'
import { DbCount } from '@/api/modular/main/DbManage'
import { DbBackupCount } from '@/api/modular/main/DbBackupManage'
import { TaskRecordCount } from '@/api/modular/main/TaskRecordManage'
import { StepRecordList } from '@/api/modular/main/StepRecordManage'
export default {
  data() {
    return {
      runStatus: '正在运行',
      onlineCount: 0,
      unOnlineCount: 0,
      allDbCount: 0,
      healthDBCount: 0,
      runTaskCount: 0,
      backupCount: 0,
      loading: true,
      logData: [],
      logColumns: [
        {
          title: '时间',
          align: 'left',
          width: 200,
          dataIndex: 'startTime',
          customRender: (val) => {
            return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
          },
        },
        {
          title: '日志',
          align: 'left',
          dataIndex: 'logMessage',
        },
      ],
    }
  },
  created() {
    this.loadCount()
    this.loadLogData()
  },
  methods: {
    switchChange(val, event) {
      if (val) this.runStatus = '正在运行'
      else this.runStatus = '已停止'
    },
    loadLogData() {
      this.logData = []
      this.loading = true
      StepRecordList()
        .then((res) => {
          if (res.success) {
            this.logData = res.data
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    loadCount(){
      DbServerCount()
        .then((res) => {
          if (res.success) {
            this.onlineCount = res.data.onlineCount
            this.unOnlineCount=res.data.unOnlineCount
          }
        })
        .finally(() => {
        })

        DbCount()
        .then((res) => {
          if (res.success) {
            this.allDbCount = res.data.allDbCount
            this.healthDBCount=res.data.healthCount
          }
        })
        .finally(() => {
        })

        DbBackupCount()
        .then((res) => {
          if (res.success) {
            this.backupCount = res.data.backupCount
          }
        })
        .finally(() => {
        })

        TaskRecordCount()
        .then((res) => {
          if (res.success) {
            this.runTaskCount = res.data.runCount
          }
        })
        .finally(() => {
        })

    },
    clickMoreLog() {
      this.$router.push({ name: 'Maste_steprecord_mgr' })
    },
  },
}
</script>

<style lang="less" scoped>
</style>
